import React, { Component } from 'react'
import Header from './components/header'
import List from './components/list'
import Footer from './components/footer'
import './App.css'

export default class App extends Component {
  state = {
    todos: [
      { id: 1, name: '吃饭', done: true },
      { id: 2, name: '睡觉', done: false },
      { id: 3, name: '打代码111', done: true },
    ],
  }

  /**
   * @description: 添加item
   * @param {*}
   * @return {*}
   * @author: Yu
   */
  addListItem = (value) => {
    let { todos } = this.state
    let newTodos = { id: todos.length + 1, name: value, done: false }
    this.setState({todos: [newTodos, ...todos] })
  }

    /**
     * @description: 修改状态
     * @param {*}
     * @return {*}
     * @author: Yu
     */
    updataDone=(id,done)=>{
        const newTodos= this.state.todos.map(v=>{
            if(v.id===id){
                return {...v,done}
            }
            return v
        })
        this.setState({ todos: newTodos })
    }

    /**
     * @description: 删除item
     * @param {*}
     * @return {*}
     * @author: Yu
     */    
    removeListItem=(id)=>{
        const newTodos= this.state.todos.filter(v=>{
            return v.id!==id
        })
        this.setState({
            todos:newTodos
        })
    }

    /**
     * @description: 全选
     * @param {*}
     * @return {*}
     * @author: Yu
     */    
    checkedAll=(done)=>{
        const newTodos=this.state.todos.map(v=>{
            return {...v,done}
        })
        this.setState({
          todos: newTodos
        })
    }

    /**
     * @description: 删除所有选中的内容
     * @param {*}
     * @return {*}
     * @author: Yu
     */    
    removeAllChecked=()=>{
        const newTodos=this.state.todos.filter(v=>!v.done)
        this.setState({
            todos:newTodos
        })
    }

  render() {
    return (
      <div className="contonter">
        <Header addListItem={this.addListItem}></Header>
        <List
          todos={this.state.todos}
          updataDone={this.updataDone}
          removeListItem={this.removeListItem}
        ></List>
        <Footer
          todos={this.state.todos}
          checkedAll={this.checkedAll}
          removeAllChecked={this.removeAllChecked}
        ></Footer>
      </div>
    )
  }
}
